<script setup lang="ts">
import {useRouter} from "#vue-router";

/**
 * 排行榜
 */
const props = defineProps({
  data: {
    type: Array,
    define: []
  },
  specialNum: {// 前几位特殊处理
    type: Number,
    default: 3
  },
  posCurrent: {// 是否数组自己的下标做为排行依据 启用后 mapping.realPos属性无效
    type: Boolean,
    default: true
  },
  title: {// 是否数组自己的下标做为排行依据 启用后 mapping.realPos属性无效
    type: String,
    default: "标题"
  },
  url: {
    type: Object,
    default: {
      current: true,//当前项目调转
      prefix: "",//url前缀
      itemMsg: ""//当前对象的属性值做为参数
    }
  },
  mapping: {//映射属性表，用于通用排行榜
    type: Object,
    default: {
      content: "",
      tips: "",
      smallIconDesc: "",//后面的小图标描述
      smallIconDescColor: "",//后面的小图标颜色
      hotCount: "",// 排行依据数量
      realPos: "",// 当前排行
      top: "",// 是否置顶
    }
  }
})

onMounted(() => {
  initMapping();
  initUrl();
})

watch(() => props.mapping, (newValue) => {
  initMapping();
})

watch(() => props.url, (newValue) => {
  initUrl();
})
const currentMapping = ref({
  content: "",
  tips: "",
  smallIconDesc: "",//后面的小图标描述
  smallIconDescColor: "",//后面的小图标颜色
  hotCount: "",// 排行依据数量
  realPos: "",// 当前排行
  top: "",// 是否置顶
})

const url = ref({
  current: true,//当前项目调转
  prefix: "",//url前缀
  itemMsg: ""//当前对象的属性值做为参数
})

function initUrl() {
  if (!itemIsNull(props.url)) {
    if (!itemIsNull(props.url.current)) {
      url.value.current = props.url.current;
    }
    if (!itemIsNull(props.url.prefix)) {
      url.value.prefix = props.url.prefix;
    }
    if (!itemIsNull(props.url.itemMsg)) {
      url.value.itemMsg = props.url.itemMsg;
    }
  }
}

function initMapping() {
  if (!itemIsNull(props.mapping)) {
    if (!itemIsNull(props.mapping.content)) {
      currentMapping.value.content = props.mapping.content;
    }
    if (!itemIsNull(props.mapping.tips)) {
      currentMapping.value.tips = props.mapping.tips;
    }
    if (!itemIsNull(props.mapping.smallIconDesc)) {
      currentMapping.value.smallIconDesc = props.mapping.smallIconDesc;
    }
    if (!itemIsNull(props.mapping.smallIconDescColor)) {
      currentMapping.value.smallIconDescColor = props.mapping.smallIconDescColor;
    }
    if (!itemIsNull(props.mapping.hotCount)) {
      currentMapping.value.hotCount = props.mapping.hotCount;
    }
    if (!itemIsNull(props.mapping.realPos)) {
      currentMapping.value.realPos = props.mapping.realPos;
    }
    if (!itemIsNull(props.mapping.posCurrent)) {
      currentMapping.value.top = props.mapping.top;
    }
  }
}

function itemIsNull(item: any) {
  return item === '' || item === null || item === undefined
}

function getHotCount(hotCount = "") {
  if (hotCount) {
    let val = parseFloat(hotCount);
    if (val > 10000) {
      return `${(val / 10000.0).toFixed(1)}万`
    } else {
      return `${val}`
    }
  } else {
    return ""
  }
}

const router = useRouter()

function moveTo(item = "") {
  if (item === null || item === undefined || item === "") {
    return;
  }
  if (url.value.prefix){
    if (url.value.current) {
      router.push(url.value.prefix + item[url.value.itemMsg])
    } else {
      window.open(url.value.prefix + item[url.value.itemMsg], '_blank');
    }
  }
}
</script>

<template>
  <div class="ranking-box">
    <div class="title">
      {{ title }}
    </div>
    <div class="content">
      <div class="real-time-item" v-for="(item,index) in data">
        <div class="real-pos">
          <template v-if="posCurrent">
              <span class="real-pos-item" :style="index < specialNum?'font-weight: 900;':''">
                {{ index }}
              </span>
          </template>
          <template v-else>
            <template v-if="item[currentMapping.top]">
              <span class="iconfont icon-dingbu"></span>
            </template>
            <template v-else>
              <div class="real-pos"
                   :style="item[currentMapping.realPos] && (Number(item[currentMapping.realPos]) < specialNum)?'font-weight: 900;':''">
                <span>{{ item[currentMapping.realPos] ? item[currentMapping.realPos] : '●' }}</span>
              </div>
            </template>
          </template>
        </div>
        <div class="word">
          <el-tooltip class="box-item" :content="item[currentMapping.tips]" :show-after="500"
                      placement="right" effect="light">
            <div class="word-item" @click="moveTo(item)">
              {{ item[mapping.content] }}
            </div>
          </el-tooltip>
        </div>
        <div class="raw-hot" v-if="currentMapping.hotCount">{{ getHotCount(item[currentMapping.hotCount]) }}</div>
        <div class="icon-desc" v-if="currentMapping.smallIconDesc"
             :style="`background-color: ${item[currentMapping.smallIconDescColor]}`">
          {{ item[currentMapping.smallIconDesc] }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ranking-box {
  background-color: #fff;
  border-radius: 5px;

  .title {
    font-weight: bold;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    padding: 1rem .5rem;
    border-bottom: solid 1px #c7c7c7;
  }

  .content {
    padding: 1rem .5rem;

    .real-time-item {
      display: flex;
      align-items: center;
      padding: .15rem;
      margin: .2rem 0;
      -webkit-user-select: none; /* Chrome/Safari/Opera */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /*禁止复制*/
      box-sizing: border-box;

      .real-pos {
        color: rgb(255, 130, 0);
        font-size: 1.3rem;
        margin: 0 .5rem;
      }

      .word {
        padding: 0 .5rem 0 .75rem;
        color: rgb(0, 0, 0);
        cursor: pointer;
        font-size: 1.1rem;

        :deep(.word-item) {
          max-width: 8rem;
          margin: 0 !important;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 隐藏多余的文本 */
          text-overflow: ellipsis; /* 用省略号代替多余的文本 */
        }
      }

      .word:hover {
        color: #2e86ef;
      }

      .raw-hot {
        font-size: .8rem;
        color: #939393;
        white-space: nowrap; /* 不换行 */
      }

      .icon-desc {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 .3rem;
        padding: .15rem .2rem;
        border-radius: .2rem;
        font-size: .8rem;
        color: rgb(235, 237, 240);
        background-color: #e15555;
      }
    }
  }
}
</style>